<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage</title>
    <!-- <link rel="stylesheet" href="./style.css"> -->
</head>

<body>
    <div class="wrapper">
        <h2>LOCAL TAPAS</h2>
        <p></p>
        <ul class="plates">
            <li>Loading Tapas...
            </li>
        </ul>
        <form action="" class="add-items">
            <input type="text" name="item" id="" placeholder="Item Name" autofocus required>
            <input type="submit" value="+ Add Item">
        </form>
    </div>
    <script>
        const addItems = document.querySelector('.add-items')
        const itemsList = document.querySelector('.plates')
        const items = (JSON.parse(localStorage.getItem("item")))
        console.log(items);
        /* function init() {
            const storageItems=JSON.parse(localStorage.getItem("items"))
            if(storageItems.length){
                populateList(storageItems,itemsList)
            }
            
        } */
       
       /*  init() */

        function populateList(plates = [], platesList) {
            platesList.innerHTML = plates.map((plate, i) => `
            <li>
                <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ""}/>
                <label for="item${i}">${plate.text}</label>
                </li>`).join("")

        }
        function addItem(event) {
            event.preventDefault()

            const text = this.querySelector('[name=item]').value.trim()
         /*    console.log(text); */
            const item = {
                text,//text:text es6的省略写法
                done: false
            }
            items.push(item)
            populateList(items, itemsList)
            /* console.log(JSON.stringify(items)); */
            localStorage.setItem("item",JSON.stringify(items)) 
            this.reset() 
            /* itemsList.innerHTML=items.map(item=>`<li><label>${item.text}</label></li>`).join('') */
        }
         addItems.addEventListener('submit', addItem)
    </script>
</body>

</html>